<template>
  <div id="top">   
    <h1>学校管理</h1>
    <p>学校名称：{{schoolInfo.name}}</p>
    <p>学校地址：{{schoolInfo.adree}}</p>
    <p>学制：{{schoolInfo.state}}</p>
    <p>学校数量：{{count}}</p>
    <button @click="add">增加学校数量</button>
    <button @click='sendSchoolName'>发送学校名称</button>
    <button @click="unbundingSchoolName">解绑获取学校名称事件</button>
  </div>
</template>

<script>
export default {
    name:'School',
    data(){
        return{
            count:0,
            schoolInfo:{
                name:'武大',
                adree:'湖北武汉',
                state:'全日制本科'
            }
        }
    },
    methods:{
        sendSchoolName(){
          this.$emit('getSchoolName',this.schoolInfo.name)
        },
        add(){
            this.count++
            this.$emit('getschoolNum',this.count)
        },
        unbundingSchoolName(){
            // this.$off('getSchoolName') 单个解绑
            // this.$off('getSchoolName','getschoolNum') 这样解绑是错误的
            // this.$off(['getSchoolName','getschoolNum'])  在进行多个解绑时 需要将多个自定义事件放入一个数组中 才能生效
            this.$off()    //不放入任何事件 就解绑所有的自定义事件    
        }
    }
}
</script>

<style scoped>
  #top{
    background-color: aquamarine;
  }
</style>